<template>
  <div class="pullTeaData-add-update-component">
    <el-dialog
      v-if="modelValue.visible"
      v-model="modelValue.visible"
      :title="
        !modelValue.form.id
          ? `新增${modelValue.title}`
          : `修改${modelValue.title}`
      "
      width="550px"
    >
      <div style="padding-right: 50px">
        <el-form
          :model="modelValue.form"
          :rules="modelValue.rules"
          ref="addEditRef"
          :label-width="80"
        >
          <el-form-item label="id" prop="id">
            <el-input
              placeholder="请输入id"
              v-model="modelValue.form.id"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="type" prop="type">
            <el-input
              placeholder="请输入type"
              v-model="modelValue.form.type"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="status" prop="status">
            <el-input
              placeholder="请输入status"
              v-model="modelValue.form.status"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="create_time" prop="createTime">
            <el-input
              placeholder="请输入create_time"
              v-model="modelValue.form.createTime"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="imei" prop="imei">
            <el-input
              placeholder="请输入imei"
              v-model="modelValue.form.imei"
              autocomplete="off"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer v-if="!modelValue.form.disabled">
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="ensure"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script  setup lang='ts'>
import { ref, onMounted } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { addPullTeaData, updatePullTeaData } from "@/api/pullTeaData.api";

const props = defineProps(["modelValue"]);
const addEditRef = ref<FormInstance>();

/***
 * 确认弹框
 */
const ensure = () => {
  let form = props.modelValue.form;
  let formData = {
    type: form.type,
    status: form.status,
    createTime: form.createTime,
    imei: form.imei,
  };

  if (!addEditRef.value) return;
  addEditRef.value.validate((valid, fields) => {
    if (valid) {
      if (form.id) {
        updatePullTeaData({
          ...formData,
          id: form.id,
        })
          .then((res) => {
            cancel();
            ElMessage({
              message: props.modelValue.title + "修改成功",
              type: "success",
            });
            if (props.modelValue.refreshDataList) {
              props.modelValue.refreshDataList();
            }
          })
          .catch((err) => {
            ElMessage({
              message: err.msg || err,
              type: "error",
            });
          });
        return;
      }

      addPullTeaData(formData)
        .then((res) => {
          cancel();
          ElMessage({
            message: props.modelValue.title + "新增成功",
            type: "success",
          });
          if (props.modelValue.refreshDataList) {
            props.modelValue.refreshDataList();
          }
        })
        .catch((err) => {
          ElMessage({
            message: err.msg || err,
            type: "error",
          });
        });
    }
  });
};

/***
 * 取消弹框
 */
const cancel = () => {
  props.modelValue.visible = false;
};
</script>
<style lang='scss' scoped>
</style>
